<!--
 * @Version: 1.0
 * @Date: 2021-04-07 14:33:42
 * @LastEditTime: 2021-09-29 10:08:50
 * @Description:
-->
<template>
  <div>
    <el-dialog :center="true" :title="title" :visible.sync="formVisibleDown" width="60%" :before-close="() => {$emit('update:formVisibleDown', false)}" @open="openDialog">
      <div v-loading="loadingTable">
        <div class="header_title_box">
          <h2 style="margin-right:50px">
            基本信息
          </h2>
        </div>
        <el-form :model="dataObj" inline label-width="150px">
          <el-row :gutter="20">
            <el-col :span="11">
              <el-form-item label="售后类型：">
                <span>{{ typeData[dataObj.type] }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="售后单号：">
                <span>{{ dataObj.sale_order_no }}</span>
              </el-form-item>
            </el-col>
            <el-col v-if="dataObj.type === 1" :span="11">
              <el-form-item label="退款类型：">
                <span>{{ refundTypeData[dataObj.refund_type] }}</span>
              </el-form-item>
            </el-col>
            <el-col v-if="dataObj.type === 2 || dataObj.type === 4" :span="11">
              <el-form-item label="仓库：">
                <span>{{ dataObj.warehouses_name }}</span>
              </el-form-item>
            </el-col>
            <el-col v-if="(dataObj.type === 2 && type !== '1')|| dataObj.type === 4" :span="11">
              <el-form-item label="物流：">
                <span>{{ dataObj.refund_logistics_text }}</span>
              </el-form-item>
            </el-col>
            <el-col v-if="(dataObj.type === 2 && type !== '1') || dataObj.type === 4" :span="11">
              <el-form-item label="物流单号：">
                <span>{{ dataObj.logistics_no }}</span>
              </el-form-item>
            </el-col>
            <el-col v-if="dataObj.type === 2 || dataObj.type === 4" :span="11">
              <el-form-item label="仓库地址：">
                <span>{{ dataObj.state }}/{{ dataObj.city }}/{{ dataObj.street }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="售后原因：">
                <span>{{ dataObj.sale_reason_text ? dataObj.sale_reason_text : '-' }}</span>
              </el-form-item>
            </el-col>
            <!-- goods_warehous_type -->
            <el-col v-if="dataObj.type === 2 || dataObj.type === 4" :span="11">
              <el-form-item label="商品入库类型：">
                <span>{{ dataObj.warehous_order_id ? (dataObj.goods_warehous_type===1 ? '良品': '残品' ): '-' }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="备注：">
                <span>{{ dataObj.remarks ? dataObj.remarks: '-' }}</span>
              </el-form-item>
            </el-col>
            <el-col v-if="dataObj.type==1||dataObj.type==2" :span="11">
              <el-form-item label="售后产生费用：">
                <app-price :price="dataObj.fill_amount" />
              </el-form-item>
            </el-col>
            <el-col v-else :span="11">
              <el-form-item label="售后产生费用：">
                <app-price :price="dataObj.modify_amount" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <!-- 配件信息 -->
        <div v-if="dataObj.type === 3 && dataObj.replenish_type === 2" style="margin-bottom:50px">
          <div class="header_title_box">
            <h2 style="margin-right:50px">
              配件信息
            </h2>
          </div>
          <div>
            <el-table :data="dataObj.parts">
              <el-table-column align="center" label="缩略图" prop="url" />
              <el-table-column align="center" label="系统sku" prop="goods_code" />
              <el-table-column align="center" label="商品名称" prop="name" show-overflow-tooltip />
              <el-table-column align="center" label="数量" prop="quantity_purchased" />
            </el-table>
          </div>
        </div>
        <div v-if="dataObj.type === 1 || dataObj.type === 2 ||dataObj.type === 4 || dataObj.replenish_type === 1" style="margin-bottom:50px">
          <div class="header_title_box">
            <h2 style="margin-right:50px">
              商品信息
            </h2>
          </div>
          <div>
            <el-table :data="dataObj.product">
              <el-table-column align="center" label="缩略图">
                <template v-if="scope.row.goods_pic" slot-scope="scope">
                  <el-image style="width: 50px; height: 50px" fit="contain" :src="scope.row.goods_pic">
                    <div slot="error" class="image-slot">
                      <i class="el-icon-picture-outline" />
                    </div>
                  </el-image>
                </template>
              </el-table-column>
              <el-table-column align="center" label="系统sku" prop="goods_code" />
              <el-table-column align="center" label="商品名称" prop="name" show-overflow-tooltip />
              <el-table-column align="center" label="单价" prop="transaction_price_value">
                <template slot-scope="scope">
                  <app-price :price="scope.row.transaction_price_value" />
                </template>
              </el-table-column>
              <el-table-column align="center" label="币别" prop="transaction_price_currencyid" />
              <el-table-column align="center" :label="`${ dataObj.type === 3 ? '补货' : '' }数量`" prop="quantity_purchased" />
              <el-table-column align="center" label="金额(不含税)" prop="transaction_price_value_all">
                <template slot-scope="scope">
                  <app-price :price="scope.row.transaction_price_value_all" />
                </template>
              </el-table-column>
              <el-table-column align="center" label="税费" prop="tax_amount_value">
                <template slot-scope="scope">
                  <app-price :price="scope.row.tax_amount_value" />
                </template>
              </el-table-column>
              <el-table-column v-if="dataObj.type === 2 || dataObj.type === 4" align="center" :label="`${typeDataTitle[dataObj.type]}数量`">
                <template slot-scope="scope">
                  {{ scope.row.return_num }}
                </template>
              </el-table-column>
              <el-table-column v-if="dataObj.type === 4" align="center" label="召回操作费">
                <template>
                  {{ dataObj.modify_amount }}
                </template>
              </el-table-column>
              <el-table-column v-if="dataObj.type === 4" align="center" label="召回快递费">
                <template>
                  {{ dataObj.logistics_fee }}
                </template>
              </el-table-column>
              <el-table-column v-if="dataObj.type !== 3 && dataObj.type !== 4" align="center" label="退款金额">
                <template slot-scope="scope">
                  <app-price :price="dataObj.type === 1 ? dataObj.refund_amount : scope.row.after_amount" />
                </template>
              </el-table-column>
              <!-- after_amount -->
              <!-- <el-table-column v-if="dataObj.type === 1 || dataObj.type === 2" align="center" label="售后产生费用">
                <template>
                  <app-price :price="dataObj.modify_amount" />
                </template>
              </el-table-column> -->
            </el-table>
          </div>
        </div>
        <div v-if="dataObj.type === 5 || dataObj.type === 3 || dataObj.type === 2">
          <div class="header_title_box">
            <h2 style="margin-right:50px">
              地址信息
            </h2>
          </div>
          <div>
            <el-form v-if="address" :model="dataObj" inline label-width="150px">
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-form-item label="姓名：">
                    <span>{{ address.address_name ? address.address_name : '' }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="买家电话：">
                    <span>{{ address.address_phone }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="买家邮箱：" style="display: inline-flex;">
                    <span>{{ address.address_email }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="国家：">
                    <span>{{ address.address_country }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="州/省：">
                    <span>{{ address.address_stateorprovince }}</span>
                  </el-form-item>
                </el-col>

                <el-col :span="8">
                  <el-form-item label="城市：">
                    <span>{{ address.address_cityname }}</span>
                  </el-form-item>
                </el-col>

                <el-col :span="8">
                  <el-form-item label="邮编：">
                    <span>{{ address.address_postalcode }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="街道1：">
                    <span>{{ address.address_street1 }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="街道2：">
                    <span>{{ address.address_street2 }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="街道3：">
                    <span>{{ address.address_street3 }}</span>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </div>
        <div v-if="type==='1'">
          <div class="header_title_box">
            <h2 style="margin-right:50px">
              审核意见
            </h2>
          </div>
          <div>
            <el-form ref="ruleForm" :model="formExamine" :rules="rules" label-width="140px">
              <el-form-item prop="status">
                <el-radio-group v-model="formExamine.status">
                  <el-radio label="1">通过</el-radio>
                  <el-radio label="2">驳回</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item :label="`${formExamine.status==='1'? '通过说明': '驳回原因'}`">
                <el-input v-model="formExamine.examine_reason" type="textarea" autosize placeholder="请输入最多200字符" maxlength="200" show-word-limit />
              </el-form-item>
            </el-form>
          </div>
        </div>
        <div style="text-align: center; margin-top:50px">
          <el-button v-if="type==='1'" type="primary" :loading="isbtn" @click="submitForm('ruleForm')">保存</el-button>
          <el-button :type=" type === '1' ? 'default' : 'primary'" @click="handleCancelDown">{{ type==='1' ? '取消' : '返回' }}</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import tempalant from '@/views/tempalant.vue'
// import { warehouseListReal,
//   statesList,
//   cityList,
//   cityPostalCode } from '@/utils/publicData'
export default {
  components: { tempalant },
  props: {
    formVisibleDown: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '申请售后详情'
    },
    id: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: '0'
    },
    paramsType: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      rules: {
        status: [
          {
            required: true, message: '请选择审核意见', trigger: 'change'
          }
        ]
      },
      formExamine: {
        status: '1',
        examine_reason: ''
      },
      isbtn: false,
      isShow: false,
      loadingTable: false,
      dataObj: {},
      // 退款类型 1-部分退款 2-全部退款
      // 1-客户无理由退款退货 2-描述不符 3-包装问题 4-质量问题 5-物流问题
      // 1-仅退款 2-退货退款 3-补货 4-召回 5-修改地址
      typeData: {
        1: '仅退款',
        2: '退货退款',
        3: '补货',
        4: '召回',
        5: '修改地址'
      },
      typeDataTitle: {
        1: '退款',
        2: '退货',
        3: '补货',
        4: '召回'
      },
      statusData: {
        0: '待审核',
        1: '审核通过',
        2: '审核驳回'
      },
      refundTypeData: {
        0: '-',
        1: '部分退款',
        2: '全部退款'
      }
    }
  },
  methods: {
    openDialog() {
      if (this.type === '1') {
        Object.keys(this.formExamine).forEach(k => {
          this.formExamine['status'] = '1'
          this.formExamine['examine_reason'] = ''
        })
        this.isbtn = false
      }
      this.loadingTable = true
      this.orderInfo()
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.isbtn = true
          const data = this.formExamine
          data.status = Number(data.status)
          this.$http.put(`/afterSaleOrders/orderCheck/${this.id}`, data).then((res) => {
            if (res.code === 10000) {
              this.$message.success('审核成功')
              this.$refs['ruleForm'].resetFields()
              this.$emit('handleSearch')
              this.handleCancelDown()
            }
            this.isbtn = false
          }).catch(() => {
            this.isbtn = false
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 更新input不能输入的问题
    inputChange() { this.$forceUpdate() },
    // 订单地址详情
    orderInfo() {
      const vm = this
      vm.$http.get(`/afterSaleOrders/addressInfo/${vm.id}`).then((res) => {
        if (res.code === 10000) {
          vm.dataObj = res.data
          if (res.data.type === 2 || res.data.type === 4) {
            vm.dataObj.product = res.data.product_after_order.map(arr => {
              arr.transaction_price_value_all = arr.number * arr.transaction_price_value
              arr.refund_amount = arr.after_amount
              arr.recall_num = arr.return_num
              arr.name = arr.goods_name
              arr.quantity_purchased = arr.number
              arr.transaction_price_currencyid = arr.transaction_price_currencyid ? arr.transaction_price_currencyid : 'USD'
              return arr
            })
          } else {
            vm.dataObj.product = res.data.product.map(arr => {
              arr.transaction_price_value_all = arr.quantity_purchased * arr.transaction_price_value
              return arr
            })
            if (vm.dataObj.type === 3 && vm.dataObj.replenish_type === 1) {
              vm.dataObj.product = res.data.parts.map((arr) => {
                arr.transaction_price_value_all = arr.quantity_purchased * arr.transaction_price_value
                return arr
              })
            }
          }
          if (res.data.type === 2) {
            vm.address = res.data.address_drivery[0]
          } else {
            vm.address = res.data.address[0]
          }

          this.loadingTable = false
        }
        this.loadingTable = false
      })
    },
    // 关闭
    handleCancelDown() {
      this.$emit('update:formVisibleDown', false)
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
